<template>
	<div class="menu">
		<Loading :is_show="is_show"></Loading>
		<div v-if="answer_show">
			<div class="ai">
				<image src="../../static/icon/ai.png" mode="" style="width: 40px; height: 40px;"></image>
			</div>
			<div class="answer">
				<div class="answer-box">
					<text>{{answer}}</text>
				</div>
			</div>
			<!-- 全屏 -->

			<div class="dian" @click="full_screen">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>


		<div class="question">
			<fui-row margin-bottom="24rpx">
				<fui-col :span="16">
					<view class="fui-col__item fui-color__black">
						<fui-textarea placeholder="请输入内容" v-model="text" :textareaBorder="true" borderColor="#c2c2c2c2"
							height="40rpx"></fui-textarea>
					</view>
				</fui-col>
				<fui-col :span="8">
					<view class="fui-col__item fui-color__yellow"><fui-button radius="0" height="100rpx" min-height="100rpx"
							text="发送" type="purple" width="250rpx" @click="send_quiz"></fui-button></view>
				</fui-col>
			</fui-row>

		</div>



		<!-- 全屏 -->
		<fui-backdrop :show="show_backdrop" closable :absolute="false">
			<div v-if="show" class="full_screen">
				<div class="close" @click="close">
					<image src="../../static/icon/close.png" mode="" style="width: 30px; height: 30px;"></image>
				</div>
				<text>{{answer}}</text>
			</div>
		</fui-backdrop>

	</div>
</template>

<script>
	import Loading from "../../components/loading/index.vue"

	import {
		httpRequest
	} from '../../utils/request.js'
	export default {
		components: {
			Loading,
			// fuiButton
		},
		data() {
			return {
				text: "",
				answer_show: false,
				answer: "",
				is_show: false,
				show: false,
				show_backdrop: false,
			}
		},
		methods: {
			/* 提问 */
			send_quiz() {
				let historyLists = []

				if (this.text === "") {
					uni.showToast({
						title: '内容不能为空',
						icon: 'error',
						position: 'center',
						duration: 2500
					})
					return false
				}
				this.is_show = true
				let query = {
					"model": "gpt-3.5-turbo",
					"messages": [{
						"role": "user",
						"content": this.text
					}],
					"safe_mode": "false"
				}
				httpRequest("/api/completions", "post", query).then((res) => {
					this.is_show = false
					for (let index = 0; index < res.choices.length; index++) {
						this.answer_show = true
						this.answer = res.choices[index].message.content

					}
					let historyObj = {
						"name": this.text,
						"message": this.answer
					}
					historyLists.push(historyObj)
					let tmp = uni.getStorageSync("history")
					if (tmp == "") {
						// console.log("没有数据")
						uni.setStorageSync("history", historyLists)

					} else {
						//  判断是否是重复数据
						for (let i = 0; i < tmp.length; i++) {
							for (let j = i + 1; j < tmp.length; j++) {
								if (tmp[i].name == tmp[j].name) {
									// console.log("tmp[j].name: ", tmp[j].name)
									tmp.splice(j, 1);
									j--;
								}
							}
						}
						tmp.push(historyObj)
						uni.setStorageSync("history", tmp)

					}
					this.text = ""
				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			/* 全屏 */
			full_screen() {
				this.show = true
				this.show_backdrop = true
				this.answer_show = false
			},

			/* 关闭全屏 */
			close() {
				this.show = false
				this.show_backdrop = false
				this.answer_show = true

			},
			bindTextAreaBlur: function(e) {

				this.content = e.detail.value

			},
			/* token校验 */
			// CheckToken() {
			// 	httpRequest("/api/check_token", "get", "", true)
			// },

		},
		mounted() {
			// this.CheckToken()
		},
		onShow() {
			// this.CheckToken()
		}
	}
</script>

<style scoped>
	body {
		position: relative;
		height: 100%;
	}

	.ai {
		margin-top: 15px;
		margin-left: 15px;
	}

	.answer {
		z-index: 0;
		width: 300px;
		height: 200px;
		max-height: 200px;

		position: absolute;
		top: 50rpx;
		right: 70rpx;
		background: rgb(124, 195, 98);
		opacity: 0.8;
		overflow: auto;

		border-radius: 10px;
	}

	.answer-box {
		padding: 3%;
	}

	.question {
		width: 100%;
		position: fixed;

		bottom: 0;
	}

	.question_input {
		/* width: 90%; */
		width: 240px;
		height: 43px;
		line-height: 43px;
		border: 1px solid;
		display: inline-block;
		text-indent: 4px;
		border-radius: 5px;
	}

	.send_btn {
		display: inline-block;

		width: 130px;
	}

	.dian {
		position: absolute;
		top: 430rpx;
		right: 100rpx;

		cursor: pointer;
	}

	.dian>ul>li {
		width: 5px;
		height: 5px;
		background-color: rgb(129, 150, 132);
		display: inline-block;
		margin-right: 3px;
		border-radius: 50%;

	}

	.full_screen {
		margin: 0 auto;
		margin-top: 10px;
		width: 89%;
		height: 550px;
		background: rgb(124, 195, 98);
		opacity: 0.8;
		max-height: 550px;
		border-radius: 6px;
		overflow: auto;
		padding: 0 5px;
	}

	.close {
		/* position: absolute; */
		/* 	top: -1%;
		right: 2%; */
		text-align: right;
		margin-top: 15rpx;
		margin-right: 15rpx;
	}


	.fui-row__box {
		margin: 0 !important;
	}
</style>